<template>
  <div style="width: 100%;height: 100%;position: relative;padding-top: 54px">
    <!--为啥要写这个 不然切回首页 左侧抽屉会往上跑？？？？？？？-->
    <v-app-bar flat
               app
               color="white"
               style="z-index: 1;padding-top: 6px;left: 0;"
               height="54"
               absolute
    >
      <v-toolbar-title>首页 Dashboard</v-toolbar-title>
      <v-divider
        class="mx-4"
        inset
        vertical
      ></v-divider>
      <v-spacer></v-spacer>
    </v-app-bar>
    <div class="pa-4 pt-8 overflow-hidden pa-lg-8">
      <!--天气-->
      <div class="home-card weather-card">
        <div class="card-header bg-transparent">
          <h5>今日 天气</h5>
        </div>
        <div class="card-body">
          <div class="weather-card-cloud"><img src="../assets/cloud.png" alt=""></div>
          <div class="cloud-rain"></div>
          <div class="weather-details">
            <span class="weather-title">
              <div class="rounded-circle ml-1"
                   style="width: 10px;height: 10px;border: 2px solid #FFFFFF;float: right"></div>
              <span>{{ weather.tem }}</span>
            </span>
            <div class="weather-body">
              <h4>{{ weather.city }} {{ weather.wea }}</h4>
              <!--              <span class="">{{ weather.date }}</span>-->
              <span class="d-block">PM2.5：{{ weather.air_pm25 }}</span>
              <h6 class="mb-0" style="color: #ffffff99">{{ weather.win }} : {{ weather.win_meter }} </h6>
            </div>
          </div>
          <img class="weather-card-bg" src="../assets/weather-image.png" alt="">
        </div>
      </div>
      <!--访问记录-->
      <div class="home-card visit-card">
        <div class="card-header bg-transparent">
          <ul class="creative-dots">
            <li class="blue darken-1 big-dot"></li>
            <li class="blue lighten-3 semi-big-dot"></li>
            <li class="blue darken-1 medium-dot"></li>
            <li class="pink lighten-4 semi-medium-dot"></li>
            <li class="cyan semi-small-dot"></li>
            <li class="cyan lighten-3 small-dot"></li>
          </ul>
          <h5 class="grey--text text--darken-4">访问 记录</h5>
        </div>
        <div class="card-body">
        </div>
      </div>
      <!--文章数量-->
      <div class="home-card article-count-card">
        <div class="card-header bg-transparent">
          <ul class="creative-dots">
            <li class="blue darken-1 big-dot"></li>
            <li class="blue lighten-3 semi-big-dot"></li>
            <li class="blue darken-1 medium-dot"></li>
            <li class="pink lighten-4 semi-medium-dot"></li>
            <li class="cyan semi-small-dot"></li>
            <li class="cyan lighten-3 small-dot"></li>
          </ul>
          <h5 class="grey--text text--darken-4">文章 统计</h5>
        </div>
        <div class="card-body">
          <div id="article-count-chart" class="grey--text text--darken-4"></div>
        </div>
      </div>
      <!--最近几日访问次数-->
      <div class="home-card visit-count-card">
        <div class="card-header bg-transparent">
          <h5>访问量 曲线</h5>
        </div>
        <div class="card-body">
          <div id="visit-count-chart" class="grey--text text--darken-4"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { GetAllCategory, GetVisitCount } from '@/api/blog-api'
import ApexCharts from 'apexcharts'

export default {
  name: 'CowIndex',
  computed: {
    ...mapState('milk/system', ['address', 'weather'])
  },
  created () {
    GetAllCategory().then(res => {
      this.category = res.data
      this.$nextTick(() => {
        this.initArticleCountChart(res.data)
      })
    })

    const date = new Date()
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    const today = `${year}/${month}/${day}`
    this.today = new Date(today).getTime() // 当天凌晨的时间
    this.week = this.today - 1000 * 60 * 60 * 24 * 7
    this.month = this.today - 1000 * 60 * 60 * 24 * 7 * 30
    this.year = this.today - 1000 * 60 * 60 * 24 * 7 * 365
    this.initVisitCountChart(this.week)
  },
  mounted () {
  },
  data: () => ({
    category: [],
    today: 0,
    week: 0,
    month: 0,
    year: 0,
  }),
  methods: {
    initVisitCountChart (time = this.week) {
      GetVisitCount({ time }).then(res => {
        this.category = res.data
        this.$nextTick(() => {
          this.drawVisitCountChart(res.data)
        })
      })
    },
    drawVisitCountChart (visit) {
      let x = []
      let y = []
      for (let i = 0; i < visit.length; i++) {
        x.push(visit[i]._id)
        y.push(visit[i].count)
      }

      let options = {
        chart: {
          type: 'area',
          height: 300,
          width: '100%',
          toolbar: {
            show: false
          },
          zoom: {
            enabled: false,
          },
          dropShadow: {
            enabled: true,
            top: 0,
            left: 0,
            blur: 10,
            color: '#b3dcff',
            opacity: 0.35
          }
        },

        series: [{
          name: '访问量',
          data: y
        }],

        plotOptions: {},

        dataLabels: {
          enabled: false
        },

        stroke: {
          show: true,
          curve: 'smooth',
          width: 6,
          colors: ['#FFFFFF'],
        },

        grid: {
          xaxis: {
            lines: {
              show: false,
            }
          },
          yaxis: {
            lines: {
              show: false,
            }
          },
          padding: {
            top: 0,
            right: 0,
            bottom: 0,
            left: -10
          },
        },

        xaxis: {
          // categories: x,
          type: 'datetime',
          categories: x,
          axisBorder: {
            show: false
          },
          axisTicks: {
            show: false
          },

          labels: {
            show: false,
          },

          tickAmount: undefined,
          tickPlacement: 'between',
          min: undefined,
          max: undefined,
          range: undefined,
          floating: false,
          position: 'bottom',
          title: {
            text: undefined,
            offsetX: 0,
            offsetY: 0,
            style: {
              color: undefined,
              fontSize: '12px',
              fontFamily: 'Helvetica, Arial, sans-serif',
              fontWeight: 600,
              cssClass: 'apexcharts-xaxis-title',
            },
          },
          crosshairs: {
            show: true,
            width: 1,
            position: 'back',
            opacity: 0.9,
            stroke: {
              color: '#b6b6b6',
              width: 0,
              dashArray: 0,
            },
            fill: {
              type: 'solid',
              color: '#B1B9C4',
              gradient: {
                colorFrom: '#D8E3F0',
                colorTo: '#BED1E6',
                stops: [0, 100],
                opacityFrom: 0.4,
                opacityTo: 0.5,
              },
            },
            dropShadow: {
              enabled: false,
              top: 0,
              left: 0,
              blur: 1,
              opacity: 0.4,
            },
          },
          tooltip: {
            enabled: false,
          },
        },

        yaxis: {
          labels: {
            show: false
          }
        },

        fill: {
          opacity: 0.3,
          type: ['gradient'],
          gradient: {
            shadeIntensity: 1,
            opacityFrom: 0.7,
            opacityTo: 0.1,
            stops: [0, 90, 100]
          },
          colors: ['#b3dcff']
        },

        tooltip: {
          x: {
            formatter: function (val) {
              let monthHuman = {
                0: '一月',
                1: '二月',
                2: '三月',
                3: '四月',
                4: '五月',
                5: '六月',
                6: '七月',
                7: '八月',
                8: '九月',
                9: '十月',
                10: '十一月',
                11: '十二月',
              }
              let date = new Date(val)
              let year = date.getFullYear()
              let month = date.getMonth()
              let day = date.getDate()
              return monthHuman[month] + ' ' + day+'号'
            }
          },
          y: {
            formatter: function (val) {
              return val
            }
          },
        },

      }
      let chart = new ApexCharts(document.querySelector('#visit-count-chart'), options)
      chart.render()
    },

    initArticleCountChart (cateogry) {
      let x = []
      let y = []
      for (let i = 0; i < cateogry.length; i++) {
        x.push(cateogry[i].name)
        y.push(cateogry[i].articleCount)
      }
      let options = {
        chart: {
          type: 'bar',
          height: 300,
          toolbar: {
            show: false
          },
          // colors: ['#2E93fA', '#b3dcff', '#caa7f3', '#5ecff5', '#FF9800'],
          // stroke: {
          //   show: true,
          //   curve: 'smooth',
          //   // OR provide an array
          // },
          dropShadow: {
            enabled: true,
            top: 0,
            left: 0,
            blur: 10,
            color: '#b3dcff',
            opacity: 0.35
          }
        },
        series: [{
          name: '文章数',
          data: y
        }],

        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '20%',
            startingShape: 'rounded',
            endingShape: 'rounded',
          },
        },

        dataLabels: {
          enabled: false
        },

        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },

        grid: {
          xaxis: {
            lines: {
              show: false,
            }
          },
          yaxis: {
            lines: {
              show: false,
            }
          },
        },

        xaxis: {
          categories: x,
          axisBorder: {
            show: false
          },
          axisTicks: {
            show: false
          }
        },
        yaxis: {
          labels: {
            show: false
          }
        },
        fill: {
          opacity: 1,
          colors: ['#2E93fA', '#b3dcff', '#caa7f3', '#5ecff5', '#FF9800']
        },
        tooltip: {
          x: {
            formatter: function (val) {
              return '分类：' + val
            }
          },
          y: {
            formatter: function (val) {
              return val + ' 篇'
            }
          },
        },

      }
      let chart = new ApexCharts(document.querySelector('#article-count-chart'), options)
      chart.render()
    }
  },
}
</script>

<style>
.bg-transparent {
  background-color: transparent;
}

ul.creative-dots {
  position: absolute;
  top: 0;
  left: 0;
}

ul.creative-dots li {
  position: absolute;
  border-radius: 100%;
}

ul.creative-dots li.big-dot {
  left: -32px;
  top: 0;
  width: 50px;
  height: 50px;
  border-radius: 80% !important;
}

ul.creative-dots li.semi-big-dot {
  width: 30px;
  height: 30px;
  left: -14px;
  top: 42px;
}

ul.creative-dots li.medium-dot {
  width: 20px;
  height: 20px;
  left: 18px;
  top: -5px;
}

ul.creative-dots li.semi-medium-dot {
  width: 13px;
  height: 13px;
  left: 20px;
  top: 38px;
}

ul.creative-dots li.semi-small-dot {
  width: 8px;
  height: 8px;
  left: 32px;
  top: 23px;
}

ul.creative-dots li.small-dot {
  width: 4px;
  height: 4px;
  left: 42px;
  top: 37px;
}


.home-card {
  position: relative;
  height: 430px;
  border-radius: 40px;
  overflow: hidden;
  color: white;
  transition: all .2s ease-in-out;
  letter-spacing: 1px;
  margin-bottom: 40px;
}

.card-header {
  position: relative;
  padding: 50px;
  font-size: 18px;
  font-weight: 800;
  color: white;
  transition: all .2s ease-in-out;
}

.weather-card {
  width: 65%;
  background-image: linear-gradient(to bottom right, #863ee2, #7d18a9);
  box-shadow: 2px 12px 26px 3px rgba(126, 55, 216, 0.3);
  float: left;
}

.weather-bg img {
  width: 100%;
}

.weather-card-cloud {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 220px;
  height: auto;

}

.weather-card-bg {
  position: absolute;
  width: 100%;
  bottom: -6px;
  height: 242px;
}

.weather-details {
  display: flex;
  padding-left: 50px;
}

.weather-title {
  font-weight: 700;
  font-size: 60px;
  padding-right: 40px;
  line-height: 1;
  overflow: hidden;
}

.weather-body {
  position: relative;
}

.weather-body::before {
  position: absolute;
  content: '';
  width: 2px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.1);
  top: 6px;
  left: -22px;
  border-radius: 100%;
  font-weight: 400;
}

.visit-card {
  width: 33%;
  float: right;
  box-shadow: 1px 5px 24px 3px rgba(2, 136, 209, 0.1)
}

.article-count-card, .visit-count-card {
  width: 49%;
  background-color: white;
}

.article-count-card {
  float: left;
  box-shadow: 1px 5px 24px 3px rgba(2, 136, 209, 0.1)
}

.visit-count-card {
  float: right;
  background-image: linear-gradient(to bottom right, #00d2d7, #07b2dd);
  box-shadow: 2px 12px 26px 3px rgba(6, 181, 221, 0.3)
}

@media only screen and (max-width: 960px) {
  .visit-card,
  .weather-card,
  .article-count-card,
  .visit-count-card {
    width: 100%;
  }

  .card-header {
    padding: 30px;
  }

  .small-dot {
    display: none;
  }

  ul.creative-dots {
    top: -4px;
    left: -4px;
    transform: scale(0.9);
  }
}
</style>
